<template>
  <section class="box">
    <div class="inner">
      <h1 class="cover-heading">❤ COUNT</h1>
      <ul class="list-group">
        <li class="list-group-item">
          Day
          <span class="item-right">{{ day }}</span>
        </li>
        <li class="list-group-item">
          Hours
          <span class="item-right">{{ hours }}</span>
        </li>
        <li class="list-group-item">
          Minutes
          <span class="item-right">{{ minutes }}</span>
        </li>
        <li class="list-group-item">
          Seconds
          <span class="item-right">{{ seconds }}</span>
        </li>
        <li class="list-group-item">
          Milliseconds
          <span class="item-right">{{ milliseconds }}</span>
        </li>
      </ul>
    </div>
  </section>
</template>

<script>
import dayjs from 'dayjs'
import countTo from '~/components/count-to.vue'
export default {
  components: {
    countTo
  },
  data() {
    return {
      timer: null,
      begin: dayjs('2018-06-25'),
      now: dayjs(),
      day: 0,
      hours: 0,
      minutes: 0,
      seconds: 0,
      milliseconds: 0
    }
  },
  mounted() {
    this.timer = setInterval(() => {
      this.diff()
    }, 100)
  },
  beforeDestroy() {
    clearInterval(this.timer)
  },
  methods: {
    diff(now = dayjs()) {
      const diff = now.diff(this.begin)
      this.milliseconds = diff
      this.seconds = Math.ceil(diff / 1000)
      this.minutes = Math.ceil(this.seconds / 60)
      this.hours = Math.ceil(this.minutes / 60)
      this.day = Math.ceil(this.hours / 24)
    }
  }
}
</script>

<style lang="less" scoped>
@import url('~assets/css/page-layout.less');

/* 超小屏幕（手机，小于 768px） */
/* 没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的（还记得 Bootstrap 是移动设备优先的吗？） */
.list-group {
  margin: 0 auto;
  max-width: 510px;
  background-color: #333;
  .list-group-item {
    background-color: #333;
    text-align: left;
    position: relative;
    .item-right {
      float: right;
    }
  }
}

/* 小屏幕（平板，大于等于 768px） */
@media (min-width: 768px) {
}

/* 中等屏幕（桌面显示器，大于等于 992px） */
@media (min-width: 992px) {
}

/* 大屏幕（大桌面显示器，大于等于 1200px） */
@media (min-width: 1200px) {
}
</style>
